<template>
  <div class="markdown-page">
    <t-card class="q-pa-md" style="position: sticky; top: 0">
      <div class="head-card-content flex">
        <div class="setting q-mr-md">
          <t-radio-group
            label="浅色/深色主题"
            helpPlacement="right"
            v-model="colorScheme"
            :options="[
              { label: 'light', value: 'light' },
              { label: 'dark', value: 'dark' },
            ]"
          />
          <t-radio-group
            label="代码块主题"
            helpPlacement="right"
            v-model="codeColorScheme"
            :options="[
              { label: 'light', value: 'light' },
              { label: 'dark', value: 'dark' },
            ]"
          />
          <t-checkbox label="链接文字用特来电系统主题色" v-model="isTeldThemeLink" /><br>
          <t-checkbox label="支持Html" v-model="enableHtml" />
          <hr>
          <q-input
            label="默认背景色"
            filled
            v-model="bgColor"
            class="my-input"
          >
            <template v-slot:append>
              <q-icon name="colorize" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-color v-model="bgColor" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-input
            label="默认文字色"
            filled
            v-model="color"
            class="my-input"
          >
            <template v-slot:append>
              <q-icon name="colorize" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-color v-model="color" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>

        <!-- md文本内容 -->
        <div
          class="editor flex flex-col"
          style="flex: 1; position: relative; height: 200px"
        >
          <t-textarea
            v-model="editorTxt"
            :rows="20"
            :minHeight="200"
            :autoResizeEnabled="false"
            class="full-height"
            style="height: 200px !important; resize: none; width: 100%"
          />
          <t-button
            @click="onClickClear"
            class="tr-button-default tr-button-responsive-lg"
            style="position: absolute; right: 20px;bottom:60px"
            >清空</t-button
          >
          <t-button
            color="primary"
            @click="onClickReset"
            class=""
            style="position: absolute; right: 20px;bottom:20px"
            >重置</t-button
          >
        </div>
      </div>
    </t-card>

    <div class="flex q-py-md" style="align-items: start">
      <div class="previewer" style="border: 1px solid #d2d2d2; flex: 1">
        <t-markdown
          value-type="static"
          :static-value="editorTxt"
          :color-scheme="colorScheme"
          :code-color-scheme="codeColorScheme"
          :is-teld-theme-link="isTeldThemeLink"
          :enable-html="enableHtml"
          :highlightColor="color ? color : undefined"
          :highlightBgColor="bgColor ? bgColor : undefined"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const staticValue = `## 特来电企业文化
### 特来电企业文化的三大支柱
1. 凝聚团队:是团队而不是舵手为企业领航，确保战略和重大决策绝对正确
2. 创新领航:利用团队前瞻性和对未来把控，确保一步领先、步步领先
3. 增利分享:让价值创造者优先分享增利，确保企业可持续高质量发展

### 特来电的价值观
- 以客户为中心，为其提供精致产品和优质服务
- 以价值创造者为本，让你我的理想成为现实

---

## 网址链接示例

Url文字自动转为链接形式 https://teld.cn/

也可以为链接指定标题
- [特来电官网](https://teld.cn/)
- [特来电云效平台](https://cloud.teld.org/)
- [特来电大学](https://tgood.21tb.com/)

---

## 引用示例

> 特来电团队文化体系中的团队原则
> > 是团队而不是舵手为企业领航，大家在一起心不累，愿意把后背交给团队
>
> 特来电团队文化体系中的团队标准
>> 忠诚、勇担当，干净、守底线
>
> 特来电分享文化体系中的分享形式
> > 事业合伙特来劲，增利分享特来钱，战友家人特温暖，幸福人生特来电

## 文字加粗/斜体/删除线示例

特来电的**使命**

实现**新**能源车充**新**能源电，让尾气和雾霾远离人类

特来电的*目标*

打造 *政府放心、客户满意* 的中国 *最强最大* 充电网生态 ~~供应商~~ 运营商

## 图片示例

![](https://resource.teld.cn/teldimage/107/teld-official-index-solution-08.jpg "特来电-小区充电网")

## 代码块示例

\`\`\`html
<t-markdown
  value-type="static"
  static-value="# Hello Markdown"
  :expr-value="variable"
  :mock-value="mockValue"
  color-scheme="light"
  code-color-scheme="dark"
/>
\`\`\`

\`\`\`js
import { ref, watch } from 'vue';

const staticValue = ref('');

watch(
  staticValue,
  (newValue) => {
    console.log('newValue:', newValue.value);
  },
);
\`\`\`

## 表格示例

|默认左对齐|中间对齐|右对齐|
|---|:---:|---:|
|特来电的**价值观**|以客户为中心，为其提供精致产品和优质服务|以价值创造者为本，让你我的理想成为现实|
|特来电的**使命**|实现新能源车充新能源电|让尾气和雾霾远离人类|
|特来电团队文化体系中的**团队原则**|是团队而不是舵手为企业领航|大家在一起心不累，愿意把后背交给团队|

## 彩色高亮文字示例

::colorful_#ADFF2F_#001a1a 荧光笔::

::colorful 彩色::::colorful_#FF8C00_white 高亮::::colorful__red 文字::::colorful_#FFA500_ 示例::

支持::colorful_#87CEFA_x 只加背景色::::colorful__green 只加前景色::::colorful_#87CEFA_orange 及两者同时使用::

::colorful_#90EE90 格::::colorful_#228B22_white 式::::colorful_#FFEBCD_red 示::::colorful_#1E90FF_white 例::

\`\`\`
::colorful_green_white 文字::
\`\`\`

::colorful 使用统一配置时不用每次单独指定颜色::

::colorful_#A1A1A1_#1A1A1A 可以与**加粗**、*斜体* 以及 ~~删除线~~ 同时嵌套使用::

`;
const editorTxt = ref(staticValue);

const colorScheme = ref('light');
const codeColorScheme = ref('light');
const isTeldThemeLink = ref(true);
const enableHtml = ref(true);
const bgColor = ref('');
const color = ref('');

const onClickClear = () => {
  editorTxt.value = '';
};

const onClickReset = () => {
  editorTxt.value = staticValue;
};

</script>

<style lang="scss" scoped>
.markdown-page {
  .editor {
    ::v-deep(textarea) {
      height: 200px !important;
    }
  }
}
</style>
